<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>商品详情</title>
<!--    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.min.css">-->
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
        <a class="navbar-brand" href="index.html">二手交易平台</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="index.html">商品列表</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<div class="container mt-4">
    <div id="goods-detail" class="mb-4">
        <!-- 商品详情将通过JavaScript动态加载 -->
    </div>

    <div class="card mb-4">
        <div class="card-header">
            <h5 class="mb-0">发表评论</h5>
        </div>
        <div class="card-body">
            <form id="comment-form">
                <div class="mb-3">
                    <textarea class="form-control" id="comment-content" rows="3" required></textarea>
                </div>
                <button type="submit" class="btn btn-primary">发表评论</button>
            </form>
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            <h5 class="mb-0">评论列表</h5>
        </div>
        <div class="card-body">
            <div id="comments-list">
                <!-- 评论列表将通过JavaScript动态加载 -->
            </div>
        </div>
    </div>
</div>

<!--<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>-->
<script>
// 获取URL参数
const urlParams = new URLSearchParams(window.location.search);
const goodsId = urlParams.get('id');

// 加载商品详情
fetch(`/pljb_war_exploded/goods/${goodsId}`)
    .then(r => r.json())
    .then(goods => {
        const detailDiv = document.getElementById('goods-detail');
        detailDiv.innerHTML = `
            <div class="card">
                <div class="card-body">
                    <h3 class="card-title">${goods.name}</h3>
                    <p class="card-text">${goods.description}</p>
                    <p class="card-text"><strong>价格：</strong>¥${goods.price}</p>
                    <button class="btn btn-danger" onclick="showReportModal()">举报</button>
                </div>
            </div>`;
    });

// 加载评论列表
function loadComments() {
    fetch(`/pljb_war_exploded/comment?goodsId=${goodsId}`)
        .then(r => r.json())
        .then(comments => {
            const commentsList = document.getElementById('comments-list');
            commentsList.innerHTML = comments.map(comment => `
                <div class="comment mb-3">
                    <div class="d-flex justify-content-between align-items-start">
                        <div>
                            <h6 class="mb-1">${comment.studentName}</h6>
                            <p class="mb-1">${comment.content}</p>
                            <small class="text-muted">${new Date(comment.createTime).toLocaleString()}</small>
                        </div>
                        <button class="btn btn-sm btn-outline-primary" onclick="showReplyForm(${comment.id})">回复</button>
                    </div>
                    <div id="reply-form-${comment.id}" class="mt-2" style="display: none;">
                        <form onsubmit="submitReply(event, ${comment.id})">
                            <div class="input-group">
                                <input type="text" class="form-control" placeholder="回复评论..." required>
                                <button class="btn btn-primary" type="submit">发送</button>
                            </div>
                        </form>
                    </div>
                    <div id="replies-${comment.id}" class="ms-4 mt-2">
                        <!-- 回复列表将通过JavaScript动态加载 -->
                    </div>
                </div>
            `).join('');
        });
}

// 提交评论
document.getElementById('comment-form').addEventListener('submit', function(e) {
    e.preventDefault();
    const content = document.getElementById('comment-content').value;
    
    fetch('/pljb_war_exploded/comment', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            goodsId: goodsId,
            content: content
        })
    })
    .then(r => r.json())
    .then(response => {
        if (response.success) {
            document.getElementById('comment-content').value = '';
            loadComments();
        } else {
            alert('评论发表失败：' + response.message);
        }
    });
});

// 显示回复表单
function showReplyForm(commentId) {
    const replyForm = document.getElementById(`reply-form-${commentId}`);
    replyForm.style.display = replyForm.style.display === 'none' ? 'block' : 'none';
}

// 提交回复
function submitReply(event, commentId) {
    event.preventDefault();
    const content = event.target.querySelector('input').value;
    
    fetch('/pljb_war_exploded/comment/reply', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            commentId: commentId,
            content: content
        })
    })
    .then(r => r.json())
    .then(response => {
        if (response.success) {
            event.target.reset();
            loadComments();
        } else {
            alert('回复发表失败：' + response.message);
        }
    });
}

// 显示举报模态框
function showReportModal() {
    const modal = new bootstrap.Modal(document.createElement('div'));
    modal.element.innerHTML = `
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">举报商品</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="report-form">
                        <div class="mb-3">
                            <label class="form-label">举报原因</label>
                            <textarea class="form-control" id="report-reason" rows="3" required></textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="submitReport()">提交举报</button>
                </div>
            </div>
        </div>
    `;
    document.body.appendChild(modal.element);
    modal.show();
}

// 提交举报
function submitReport() {
    const reason = document.getElementById('report-reason').value;
    
    fetch('/pljb_war_exploded/report', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            goodsId: goodsId,
            reason: reason
        })
    })
    .then(r => r.json())
    .then(response => {
        if (response.success) {
            alert('举报提交成功');
            bootstrap.Modal.getInstance(document.querySelector('.modal')).hide();
        } else {
            alert('举报提交失败：' + response.message);
        }
    });
}

// 初始加载评论
loadComments();
</script>
</body>
</html> 